import React, { Component } from "react";
import { eventTrack, messages } from "share/common";
import updateLogService from "containers/help-center-user/update-log/update-log.service";
import menuRoute from "routes/menuRoute";
import "styles/home/update-log.scss";
import SVGIcon from "components/SVGIcon";

class UpdateLog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      logs: [], //更新日志
    };
  }

  componentWillMount() {}

  componentDidMount() {
    this.getUpdateLogList();
  }

  getUpdateLogList = () => {
    updateLogService.getUpdateLogList({ size: 1 }).then((res) => {
      this.setState({
        logs: res.data,
      });
    });
  };

  goUpdateLog = () => {
    this.context.router.push(menuRoute.getRouteItem("update-log", "key").url);
    eventTrack({
      category: "1218-新首页-埋点",
      action: "【更新日志】，点击查看了更多",
      label: this.props.tenant.tenantName,
    });
  };

  render() {
    const { logs } = this.state;
    return (
      <div id={"home-update-log-guide-id"} className="home-update-log one-third-content">
        <div className="head-wrapper">
          <div className="home-title">{messages("basic-1.key40") /*更新日志*/}</div>
          <div className="href" onClick={this.goUpdateLog}>
            {messages("common.more") /*更多*/}
            <SVGIcon className={"more-btn"} type={"home-more"} />
          </div>
        </div>
        <div className="card-content-wrapper content">
          {logs.length ? (
            <div className="log-content">
              <p className="version">{`V ${logs[0].version}`}</p>
              <div>
                <p
                  className="log"
                  ref={(ref) => (this.updateLogRef = ref)}
                  dangerouslySetInnerHTML={{
                    __html: logs[0].content
                      .replace(/style="color:.*?"/g, `style="color: #848C95"`)
                      .replace(/style="font-size:.*?"/g, `style="font-size: 12px"`),
                  }}
                />
              </div>
            </div>
          ) : (
            <p className={"log-content"}>{messages("basic-1.key42") /*当前暂无更新日志*/}</p>
          )}
        </div>
      </div>
    );
  }
}

UpdateLog.contextTypes = {
  router: React.PropTypes.object,
};

export default UpdateLog;
